<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <Header></Header>
    <Middle></Middle>
    <div class="a1"></div>
    <test-css></test-css>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import Middle from "./components/Middle.vue";
import TestCss from "./components/TestCss.vue";
export default {
  name: "App",
  data() {
    return {
      msg: "yangyang很帅！！",
    };
  },
  components: {
    Header,
    Middle,
    TestCss,
  },
  beforeCreate() {
    console.log("父组件beforeCreate");
  },
  created() {
    console.log("父组件的created");
  },
  beforeMount() {
    console.log("父组件beforeMount");
  },
  mounted() {
    console.log("父组件mounted");
  },
  beforeUpdate() {
    console.log("父组件beforeUpdate");
  },
  updated() {
    console.log("父组件Updated");
  },
  beforeDestroy() {
    console.log("父组件beforedestroy");
  },
  destroyed() {
    console.log("父组件destroyed");
  },
};
</script>

<style>
.a1 {
  width: 100px;
  height: 100px;
  background-color: blue;
}
</style>
